<template>
	<view class="page">
		<view class="itemSub">
			<view class="item first"><text class="title">咨询订单详情</text></view>
			<view class="item"><text class="title">订单交易号</text><text class="val">30190731110908118</text></view>
			<view class="item"><text class="title">医生</text><text class="val">刘东东</text></view>
			<view class="item"><text class="title">服务类型</text><text class="val">咨询</text></view>
			<view class="item"><text class="title">处理状态</text><text class="val">订单未提交</text></view>
			<view class="item"><text class="title">价格</text><text class="val">9元</text></view>
			<view class="item"><text class="title">患者</text><text class="val">李强</text></view>
		</view>

		<view class="button">
			<button class="mini-btn" type="warn" size="default" @click="togglePopup('bottom-share')">支付</button>
		</view>

		<uni-popup :show="type === 'bottom-share'" position="bottom" @hidePopup="togglePopup('')">
			<view class="bottom-content">
				<view v-for="(item, index) in bottomData" :key="index">
					<view class="bottom-content-image" @tap="navigateTo">
						<view class="icon">
							<image :src="item.icon"></image>
						</view>
						<view class="bottom-content-text">{{ item.text }}</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'

	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				type: '',
				list: ['1', '2'],
				bottomData: [{
					text: '支付宝支付',
					icon: 'http://yao.hayzon.com/static/summitOrder/zfb.png',
					loading: false
				}, {
					text: '微信支付',
					icon: 'http://yao.hayzon.com/static/summitOrder/weixin.png',
					loading: false
				}]
			};
		},
		onBackPress() {
			if (this.type !== '') {
				this.type = '';
				return true;
			}
		},
		methods: {
			togglePopup(type) {
				this.type = type;
			},
			navigateTo() {
				uni.navigateTo({
					url: 'orderOver'
				})
			}
		}
	};
</script>

<style>
	.icon {
		margin-top: 10upx;
		float: left;
	}

	.icon image {
		width: 80upx;
		height: 75upx;
	}

	.bottom-content-text {
		text-align: center;
		width: 200upx;
		line-height: 95upx;
		font-size: 1.15em;
		margin-left: 15%;
		
	}

	.bottom-content-image {
		display: flex;
		height: 95upx;
		width: 50%;
		padding-left: 25%;
		padding-right: 25%;
		border-bottom: 1px solid #e6e6e6;
	}

	.bottom-content {
		/*background-image: url('http://yao.hayzon.com/static/summitOrder/bj.png');
		background-size: 100%;
		background-repeat: no -repeat;*/
		flex-wrap: wrap;
		width: 100%;
		display: block;
	}


	.page {
		background-repeat: no-repeat;
		background-size: 100%;
		/* background-image: url('http://yao.hayzon.com/static/summitOrder/zhifu.png'); */
		height: 100%;
		background-color: #f2f2eb;
		padding-top: 13upx;		
		background: url(http://yao.hayzon.com/static/replace0823/chinesestyle.png) 100% center/100% no-repeat;
	}

	.itemSub {
		width: 100%;
		background-color: #fff;
	}

	.item {
		border-bottom: 2px solid #eeeeee;
		height: 99upx;
		line-height: 99upx;
		margin-left: 30upx;
		padding-right: 60upx;
		background-color: #fff;
	}

	.first {
		margin: 0upx;
		padding-left: 30upx;
	}

	.last {
		border-bottom: 0px solid #eeeeee;
		padding-right: 20upx;
	}

	.title {
		font-size: 1.2em;
		color: #333333;
	}

	.val {
		color: #666666;
		float: right;
	}

	.button {
		height: 130upx;
		width: 100%;
		position: fixed;
		bottom: 0px;
		background-color: #fff;
		color: #fff;
	}

	.button button {
		width: 90%;
		background-color: #df634d;
		margin-top: 15upx;
		margin-bottom: 15upx;
	}
</style>
